<template>
  <div class="comment">
        <div class="commentsWrap container-fluid" v-for='(value,index) in comments' :key='index'>
            <div class="row">
                <div class="col-xs-4 col-md-4 col-sm-4">
                    <div class="username">
                        @{{value.username}}
                    </div>
                </div>
                <div class="col-xs-8 col-md-8 col-sm-8">
                    <div class="content">
                        {{value.content}}
                        <span class="delete" @click="deleteComment(index)">删除</span>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
export default {
    name: 'comment',
    props: ['comments'],
    data () {
        return {
            msg: '',
        };
    },
    methods: mapActions([
        'deleteComment',
    ]),
};
</script>
<style scoped>
    .commentsWrap{
        margin: 10px 0;
    }
    .comment{
        margin-top: 20px;
    }
    .username,
    .content{
        text-align: left;
        position: relative;
    }
    .delete{
        position: absolute;
        right: 0;
        font-size: 10px;
        color: #ff4466;
        display: none;
        cursor: pointer;
        top: 0;
    }
    .commentsWrap:hover .delete{
        display: block;
    }
</style>


